<template>

	<view class="divBox">
		<QHzujian></QHzujian>
		<KNyue></KNyue>
		<TimeZuJian></TimeZuJian>
		<view class="bills">
			<view class="record" @click="godetails">
				<view class="recordLeft">
					<text class="letf1">就诊卡充值</text>
					<text class="left2">2020年10月5日</text>
				</view>
				<view class="recordRight">
					<text class="right1">+500.00</text>
					<text class="right2">余额3000.00</text>
				</view>
			</view>
		</view>

	</view>

	<view class="cover" v-show="state"></view>

	<jzTankuang v-show="state1" @setState='stesta'></jzTankuang>
</template>

<script setup>
	import KNyue from '~@/components/feng/KNyue/KNyue.vue'
	import QHzujian from '~@/components/feng/QHzujian/QHzujian.vue'
	import jzTankuang from '~@/components/feng/jiuzhenTankuang/jiuzhenTankuang.vue'
	import TimeZuJian from '~@/components/feng/Timecomponent/Timecomponent.vue'
	import {
		ref,
		reactive,
		toRef
	} from 'vue'
	const state = ref(false)
	//弹框开关
	const state1 = ref(false)

	//遮盖层开关
	const stesta = (v) => {
		state.value = v.value
		state1.value = v.value
	}

	//切换就诊人
	const switchs = () => {
		state.value = ref(true)
		state1.value = ref(true)
	}
	//账单详情
	const godetails = () => {
		uni.navigateTo({
			url: '/components/feng/ZDxiangqing/ZDxiangqing'
		})
	}
</script>

<style lang="scss">
	//就诊人
	$top:16rpx;
	$btm:20rpx;


	//遮盖层
	.cover {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}



	.divBox {
		display: flex;
		flex-direction: column;
		// border: 1px solid red;
		margin: 0 36rpx;
		height: 1200rpx;

		//账单
		.bills {
			width: 100%;
			box-sizing: border-box;

			//记录
			.record {
				width: 100%;
				height: 150rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-top: 1px solid #f2f2f2;
				border-bottom: 1px solid #f2f2f2;

				.recordLeft {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.letf1 {
						margin-bottom: 20rpx;
					}

					.left2 {
						font-size: 20rpx;
						color: #aaaaaa;
					}
				}

				.recordRight {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					justify-content: center;

					.right1 {
						margin-bottom: 20rpx;
						color: #f59a23;
					}

					.right2 {
						font-size: 20rpx;
						color: #aaaaaa;
					}
				}
			}
		}
	}
</style>
